<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01.样式渲染</title>
    <!--1、引入react核心文件-->
    <script src="./js/react.development.js"></script>
    <!--2、引入react操作DOM的核心文件-->
    <script src="./js/react-dom.development.js"></script>
    <!--3、当需要书写JSX结构的时候，引入babel文件-->
    <script src="./js/babel.min.js"></script>
    <style>
        .box {
            margin-left: 20px;
        }

        .box1 {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <!--4、创建容器元素-->
    <div id="root"></div>
    <!--5、设置script标签中内容类型为:text/babel-->
    <script type="text/babel">
        //样式渲染
        //6、获取容器元素对象
        let root = ReactDOM.createRoot(document.querySelector('#root'));
        //7、创建虚拟DOM元素对象
        //样式无非就是分行内样式(style);行外样式
        //在React中不允许style属性为一个字符串，在react中规定style的值一定要是一个对象
        //当如果样式属性值单位为px的话，可以省略不写
        //当如果属性值为数值的话，那么要加引号
        //当样式属性名中带有"-"的，必须转化成驼峰命名法； 例如：font-*;background-*；margin-*;padding-*；border-*;text-*;...
        //style行内属性更适合与样式属性值中有需要替换成变量的情况

        //如果是非行内的class，要求在虚拟DOM元素对象身上写成className
        //className的值可以是纯字符串；也可以是插值表达式;到底如何选择就看这个属性值是否是固定的值
        //解构
        let { Fragment } = React;
        let color = 'green';
        let vDOM = <Fragment>
            <div style={{ width: 100, height: 100, background: color, fontSize: '12px' }} className={1 > 2 ? 'box' : 'box1'}>尚硅谷</div>
        </Fragment>
        //8、渲染
        root.render(vDOM);
    </script>
</body>

</html>